<template>
	<div class="freight-container">
		<el-form label-width="120px" class="el_form" style="flex-wrap: wrap">
			<el-form-item label="供货商名称：" class="el_form_item">
				<el-input v-model="queryFrom.name" placeholder="请输入供货商名称"></el-input>
			</el-form-item>

			<el-button type="primary" @click="getData">查询</el-button>
			<el-button type="primary" @click="openAdd">新增供货商</el-button>
		</el-form>

		<table-components :tableLoading="tableLoading" :tableData="tableData">
			<el-table-column prop="name" label="供货商名称" align="center" />
			<el-table-column prop="phone" label="联系方式" align="center" />
			<el-table-column prop="address" label="联系地址" align="center" />
			<el-table-column prop="plant" label="归属平台" align="center">
				<template v-slot="scope">
					<el-tag type="warning" v-if="scope.row.plant == 0">闲鱼</el-tag>
					<el-tag type="primary" v-if="scope.row.plant == 1">校园</el-tag>
					<el-tag type="danger" v-if="scope.row.plant == 2">小红书</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="营业执照" align="center">
				<template v-slot="scope">
					<el-image :src="scope.row.license" class="license" @click="openImage(scope.row.license)"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="bank" label="开户行" align="center" />
			<el-table-column prop="account" label="收款账户" align="center" />
			<el-table-column prop="remark" label="备注" align="center" />

			<el-table-column label="操作" align="center">
				<template v-slot="scope">
					<el-button type="text" @click="openEdit(scope.row)">编辑</el-button>
					<!-- <el-button type="text" @click="freightDelete(scope.row)">删除</el-button> -->
				</template>
			</el-table-column>
		</table-components>

		<addDialog :isAdd="isAdd" :dialogVisible="addVisible" :row="clickItem" @handleClose="addClose"></addDialog>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import TableComponents from '/@/components/tableComponents/index.vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import addDialog from './dialog/add.vue';
import { getSupplier } from '/@/api/api';

const tableLoading = ref(false);
const queryFrom = ref({});

const tableData = reactive({
	total: 0,
	page: 1,
	size: 20,
	data: [],
});
const isAdd = ref(true);
const addVisible = ref(false);
const clickItem = ref({});

function openAdd() {
	isAdd.value = true;
	addVisible.value = true;
	clickItem.value = null;
}

function openEdit(row) {
	addVisible.value = true;
	isAdd.value = false;
	clickItem.value = row;
}

function addClose() {
	addVisible.value = false;
	getData();
}

async function getData() {
	tableLoading.value = false;
	let par = {
		page: tableData.page,
		size: tableData.size,
		...queryFrom.value,
	};

	let { code, data } = await getSupplier(par);
	if (code == 200) {
		tableData.data = data.list;
		tableData.total = data.total;
		tableLoading.value = false;

		// getLabelFn(data);
	}
}

function openImage(url) {
	window.open(url);
}

onMounted(() => {
	getData();
});
</script>

<style lang="scss" scoped>
@import url('/@/theme/page/page.scss');

.license {
	width: 50px;
	height: 50px;
}
</style>
